<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="./style.css/index.css" />
  <link rel="stylesheet" href="./font/iconfont.css" />
</head>

<body>
  <!-- 顶部 -->
  <!-- 顶部 -->
  <div class="boxtop">
    <div class="boxheart">
      <div class="left">
        <p><a href="#">OPPO官网</a></p>
        <p><a href="#">一加官网</a></p>
      </div>
      <div class="right">
        <p><a href="#">下载OPPO商城App</a></p>
        <p class="pdenglu" style="color: red">
          <!-- 122 -->
          <a href="./login.html">登陆</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="./myself.html">注册</a>
        </p>
        <p id="bcad" class="iconfont icon-gouwuche" style="cursor:pointer">购物车</p>
      </div>
    </div>
  </div>

  <!-- 头部 -->
  <div class="header">
    <div class="head">
      <div class="left">
        <img src="./images/logo.img.png" alt="" />
      </div>
      <div class="cen">
        <p><a href="#">OPPO专区</a></p>
        <p><a href="#">OnePlus专区</a></p>
        <p><a href="#">智能硬件</a></p>
        <p><a href="#">服务</a></p>
      </div>
      <div class="search">
        <div class="input">
          <p class="txt">
            <a href="./serach.html">OPPO K10x</a>
          </p>
          <p class="iconfont icon-fangdajing"></p>
        </div>
      </div>
    </div>
  </div>
  <!-- 轮播图 -->
  <div class="banner">
    <div class="bigbox">
      <div class="banner1"></div>
      <div class="big">
        <div class="list">
          <ul>
            <li>
              <p class="left">热门推荐</p>
              <p class="right">&gt;</p>
            </li>
            <li>
              <p class="left">OPPO</p>
              <p class="right">&gt;</p>
            </li>
            <li>
              <p class="left">一加</p>
              <p class="right">&gt;</p>
            </li>
            <li>
              <p class="left">平板电脑</p>
              <p class="right">&gt;</p>
            </li>
            <li>
              <p class="left">智能耳机</p>
              <p class="right">&gt;</p>
            </li>
            <li>
              <p class="left">智能穿戴</p>
              <p class="right">&gt;</p>
            </li>
            <li>
              <p class="left">智能电视</p>
              <p class="right">&gt;</p>
            </li>
            <li>
              <p class="left">智美生活</p>
              <p class="right">&gt;</p>
            </li>
            <li>
              <p class="left">原装配件</p>
              <p class="right">&gt;</p>
            </li>
            <li>
              <p class="left">保障服务</p>
              <p class="right">&gt;</p>
            </li>
          </ul>
          <div class="cont">
            <div class="page page1">
              <i class="fox qqq"> </i>
            </div>

            <div class="page page2">
              <i class="fox www"> </i>
            </div>

            <div class="page page3">
              <i class="fox eee"> </i>
            </div>
            <div class="page page4">
              <i class="fox rrr"> </i>
            </div>
            <div class="page page5">
              <i class="fox ttt"> </i>
            </div>
            <div class="page page6">
              <i class="fox yyy"> </i>
            </div>
            <div class="page page7">
              <i class="fox uuu"> </i>
            </div>
            <div class="page page8">
              <i class="fox iii"> </i>
            </div>
            <div class="page page9">
              <i class="fox ooo"> </i>
            </div>
            <div class="page page10">
              <i class="fox ppp"> </i>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 横向图层 -->
  <div class="main">
    <div class="across">
      <div class="left">
        <img src="./images/1.img.png" alt="" />
        <div class="content">
          <p>OPPO Find X5 Pro</p>
          <span>X轴线性马达 | 4K超清夜景视屏</span>
        </div>
      </div>
      <div class="center">
        <div class="iconfont icon-qiapian001">
          <p>领券中心</p>
        </div>
        <div class="iconfont icon-iconfront-">
          <p>以旧换新</p>
        </div>
        <div class="iconfont icon-tuihuobaozhang">
          <p>价保政策</p>
        </div>
        <div class="iconfont icon-gongwenbao">
          <p>企业购</p>
        </div>
      </div>
      <div class="right">
        <p class="iconfont icon-gerenzhongxin"></p>
        <div class="content genggai">
          <p>
            <a href="./login.html">登陆</a> |
            <a href="./register.html">注册</a>
          </p>
          <span>立即注册领取新人福利</span>
        </div>
      </div>
    </div>
    <!-- 四块手机 -->
    <div class="fourphone">
      <div class="phoneblock1"></div>
      <div class="phoneblock2"></div>
      <div class="phoneblock3"></div>
      <div class="phoneblock4"></div>
    </div>

    <!-- 热卖专区 -->
    <h3 class="hottitle">热卖专区</h3>


    <div class="hotbox">

    </div>

    <!-- 两张广告 -->
    <div class="adver">
      <a href="./soye.html?pid=1225806">
        <img src="./images/advertisement1.png" alt="" />
      </a>
      <a href="./soye.html?pid=1220645">
        <img src="./images/advertisement2.png" alt="" />
      </a>
    </div>
    <div class="floorbox">
      <!-- OPPO专区选项卡 -->
      <div class="oneplus-box">
        <h3 class="oppotitle">OPPO专区</h3>
        <div class="oppoboxqie">
          <ul class="qie1">
            <li>Find N 系列</li>
            <li>Find X 系列</li>
            <li>Reno系列</li>
            <li>K系列</li>
            <li>A系列</li>
            <li>平板电脑</li>
            <li>智能电视</li>
            <li>智能耳机</li>
            <li>运动穿戴</li>
          </ul>
          <div class="onepage">
            <!-- 第一页 -->
            <div class="qiecont qiecont1">
              <div class="bigleft">
                <a href="./soye.html?pid=1220645">
                  <img src="./images/bigimg2.jpg" alt="" /></a>
              </div>
              <div class="special"></div>
            </div>
            <!-- 第二页 -->
            <div class="qiecont qiecont2">
              <div class="bigleft">
                <a href="./soye.html?pid=1160598">
                  <img src="./images/dierzahng.png" alt="" />
                </a>
              </div>
              <div class="special"></div>
            </div>
            <!-- 第三页 -->
            <div class="qiecont qiecont3">
              <div class="bigleft">
                <a href="./soye.html?pid=1184068">
                  <img src="./images/disanzhang.png" alt="" /></a>
              </div>
              <div class="special"></div>
            </div>
            <!-- 第四页 -->
            <div class="qiecont qiecont4">
              <div class="bigleft">
                <a href="./soye.html?pid=1225806">
                  <img src="./images/dishizhang.png" alt="" /></a>
              </div>
              <div class="special"></div>
            </div>
            <!-- 第五页 -->
            <div class="qiecont qiecont5">
              <div class="bigleft">
                <a href="./soye.html?pid=1211599">
                  <img src="./images/diwuzhang.png" alt="" /></a>
              </div>
              <div class="special"></div>
            </div>
            <!-- 第六页 -->
            <div class="qiecont qiecont6">
              <div class="bigleft">
                <a href="./soye.html?pid=1225826">
                  <img src="./images/diliuzhang.png" alt="" /></a>
              </div>
              <div class="special"></div>
            </div>
            <!-- 第七页 -->
            <div class="qiecont qiecont7">
              <div class="bigleft">
                <img src="./images/diqizhang.png" alt="" />
              </div>
              <div class="special"></div>
            </div>
            <!-- 第八页 -->
            <div class="qiecont qiecont8">
              <div class="bigleft">
                <a href="./soye.html?pid=1229193">
                  <img src="./images/dibazahng.png" alt="" /></a>
              </div>
              <div class="special"></div>
            </div>
            <!-- 第九页 -->
            <div class="qiecont qiecont9">
              <div class="bigleft">
                <a href="./soye.html?pid=1225806">
                  <img src="./images/dijiuzhang.png" alt="" />
                </a>
              </div>
              <div class="special"></div>
            </div>
          </div>
        </div>
      </div>

      <!-- OnePlus专区 -->

      <div class="oneplus-box">
        <h3 class="oppotitle">OnePlus专区</h3>
        <div class="oppoboxqie">
          <ul class="qie1 qie2">
            <li>一加手机</li>
            <li>一加耳机</li>
            <li>一加配件</li>
          </ul>
          <div class="onepage onepage2">
            <!-- 第一页 -->
            <div class="qiecont qiecont1">
              <div class="bigleft">
                <a href="./soye.html?pid=1160598">
                  <img src="./images/dierzahng.png" alt="" />
                </a>
              </div>
              <div class="special"></div>
            </div>
            <!-- 第二页 -->
            <div class="qiecont qiecont2">
              <div class="bigleft">
                <a href="./soye.html?pid=1225806">
                  <img src="./images/dishizhang.png" alt="" /></a>
              </div>
              <div class="special"></div>
            </div>
            <!-- 第三页 -->
            <div class="qiecont qiecont3">
              <div class="bigleft">
                <a href="./soye.html?pid=1229193">
                  <img src="./images/dibazahng.png" alt="" /></a>
              </div>
              <div class="special"></div>
            </div>
          </div>
        </div>
      </div>
      <!-- 智能好物 -->
      <div class="oneplus-box">
        <h3 class="oppotitle">智能好物</h3>
        <div class="oppoboxqie">
          <ul class="qie1 qie3">
            <li>平板电脑</li>
            <li>智能电视</li>
            <li>智能声学</li>
            <li>智能穿戴</li>
            <li>原装配件</li>
          </ul>
          <div class="onepage onepage3">
            <!-- 第一页 -->
            <div class="qiecont qiecont1">
              <div class="bigleft">
                <a href="./soye.html?pid=1225806">
                  <img src="./images/dijiuzhang.png" alt="" />
                </a>
              </div>
              <div class="special"></div>
            </div>
            <!-- 第二页 -->
            <div class="qiecont qiecont2">
              <div class="bigleft">
                <a href="./soye.html?pid=1160598">
                  <img src="./images/dierzahng.png" alt="" />
                </a>
              </div>
              <div class="special"></div>
            </div>
            <!-- 第三页 -->
            <div class="qiecont qiecont3">
              <div class="bigleft">
                <a href="./soye.html?pid=1225806">
                  <img src="./images/dishizhang.png" alt="" /></a>
              </div>
              <div class="special"></div>
            </div>
            <!-- 第四页 -->
            <div class="qiecont qiecont4">
              <div class="bigleft">
                <a href="./soye.html?pid=1225826">
                  <img src="./images/diliuzhang.png" alt="" /></a>
              </div>
              <div class="special ddd"></div>
            </div>
            <!-- 第五页 -->
            <div class="qiecont qiecont5">
              <div class="bigleft">
                <a href="./soye.html?pid=1225806">
                  <img src="./images/dishizhang.png" alt="" /></a>
              </div>
              <div class="special ffff"></div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部 -->
    <div class="footer">
      <div class="icon">
        <div class="iconfont icon-baoxiu">
          <p>全国联保</p>
        </div>
        <div class="iconfont icon-7day">
          <p>7天无理由退换货</p>
        </div>
        <div class="iconfont icon-shizhong">
          <p>官方换货保障</p>
        </div>
        <div class="iconfont icon-huoche">
          <p>满69元包邮</p>
        </div>
        <div class="iconfont icon-31dingwei">
          <p>900+家售后网点</p>
        </div>
      </div>
      <div class="footcen">
        <div class="list">
          <div class="column1">
            <ul>
              <li>OPPO</li>
              <li><a href="#">Find N 全新折叠旗舰</a></li>
              <li><a href="#">OPPO Find X5 Pro</a></li>
              <li><a href="#">OPPO Find X5</a></li>
              <li><a href="#">OPPO Reno8 Pro+</a></li>
              <li><a href="#">OPPO Reno8 Pro</a></li>
              <li><a href="#">OPPO Reno8</a></li>
              <li><a href="#">OPPO Reno7</a></li>
              <li><a href="#">OPPO K10x</a></li>
              <li><a href="#">OPPO K10</a></li>
            </ul>
          </div>

          <div class="column2">
            <ul>
              <li>一加</li>
              <li><a href="#">一加 Ace Pro</a></li>
              <li><a href="#">一加 Ace</a></li>
              <li><a href="#">一加 Ace竞速版</a></li>
              <li><a href="#">一加 10 Pro</a></li>
              <li><a href="#">一加 9RT</a></li>
              <li><a href="#">一加 手表</a></li>
              <li><a href="#">一加 Buds Pro</a></li>
              <li><a href="#">一加 Buds Z2</a></li>
            </ul>
          </div>
          <div class="column3">
            <ul>
              <li>智能硬件</li>
              <li><a href="#">OPPO Watch 3</a></li>
              <li><a href="#">OPPO 手环 2</a></li>
              <li><a href="#">OPPO Watch 2</a></li>
              <li><a href="#">OPPO Pad</a></li>
              <li><a href="#">OPPO Pad Air</a></li>
              <li><a href="#">OPPO Enco X2</a></li>
              <li><a href="#">OPPO Enco Air2 Pro</a></li>
              <li><a href="#">OPPO Enco Air2</a></li>
            </ul>
          </div>
        </div>

        <div class="service">
          <p class="iconfont icon-kefu">
            <a href="#">在线客服</a>
          </p>
        </div>
      </div>
      <p class="copy">
        &reg; 2004-2022 OPPO 版权所有 粤ICP备14056724号 │ 隐私政策 │
        用户使用协议 │ 资质证照 │ 知识产权
      </p>
      <div class="bottom">
        <img src="./images/polic.png" />
        <span> 粤公安网备 44190002001939号</span>
      </div>
    </div>
  </div>

  <!-- 对应楼层 -->
  <ol class="floor">
    <li class="selected">OPPO</li>
    <li>OnePlus</li>
    <li>智能好物</li>
  </ol>
  <!--返回顶部-->
  <div class="slider-bar">
    <div class="iconfont icon-huidaodingbu goBack">
      <p>返回顶部</p>
    </div>
  </div>

  <!-- ../Indeximgs/11.img.png -->
  <!-- ./Indeximgs/11.img.png -->
  <!-- <img src="./images/1-1.png" alt=""> -->
  <script src="./sty.js/index.js"></script>
  <script src="./js/_ajax.js"></script>
  <script src="./js/Cook.js"></script>
  <script src="./js/move1.js"></script>
  <script>
    var hotbox = document.querySelector(".hotbox");
    var qiecont = document.querySelector(".qiecont");
    var qqq = document.querySelector(".qqq");
    var www = document.querySelector(".www");
    var eee = document.querySelector(".eee");
    var rrr = document.querySelector(".rrr");
    var ttt = document.querySelector(".ttt");
    var yyy = document.querySelector(".yyy");
    var uuu = document.querySelector(".uuu");
    var iii = document.querySelector(".iii");
    var ooo = document.querySelector(".ooo");
    var ppp = document.querySelector(".ppp");
    var phoneblock1 = document.querySelector(".phoneblock1");
    var phoneblock2 = document.querySelector(".phoneblock2");
    var phoneblock3 = document.querySelector(".phoneblock3");
    var phoneblock4 = document.querySelector(".phoneblock4");
    var special = document.querySelectorAll(".qiecont1>.special");
    var special2 = document.querySelectorAll(".qiecont2>.special");
    var special3 = document.querySelectorAll(".qiecont3>.special");
    var special4 = document.querySelectorAll(".qiecont4>.special");
    var special5 = document.querySelectorAll(".qiecont5>.special");
    var special6 = document.querySelectorAll(".qiecont6>.special");
    var special7 = document.querySelectorAll(".qiecont7>.special");
    var special8 = document.querySelectorAll(".qiecont8>.special");
    var special9 = document.querySelectorAll(".qiecont9>.special");
    var special10 = document.querySelectorAll(".qiecont10>.special");
    var ddd = document.querySelectorAll(".ddd");
    var fff = document.querySelectorAll(".ffff");
    var pdenglu = document.querySelector(".pdenglu");
    var genggai = document.querySelector(".genggai");
    var bcad = document.querySelector("#bcad");
    var column1 = document.querySelectorAll(".column1>ul");
    let scr = "";
    var pp = "";
    var oo = "";
    var ii = "";
    var uu = "";
    var yy = "";
    var tt = "";
    var rr = "";
    var ee = "";
    var ww = "";
    // console.log(bcad.innerHTML)
    var Cook = getCookie("users");
    ajax({
      type: "get",
      url: "http://localhost:3000/myself?id=" + Cook,
      success: (res) => {
        // console.log(res)
        // console.log(JSON.parse(res).data.username);
        if (JSON.parse(res).code == 0) {
          pdenglu.innerHTML =
            "欢迎你" + "   " + `${JSON.parse(res).data.username}`;
          genggai.innerHTML =
            "欢迎你" + "   " + `${JSON.parse(res).data.username}`;
          pdenglu.style.cursor = "pointer";
          pdenglu.style.cursor = "pointer";
          pdenglu.onclick = function () {
            location.href = "myself.html";
          };
          genggai.onclick = function () {
            location.href = "myself.html";
          };
        }

        bcad.onclick = function () {
          // console.log("11")
          if (JSON.parse(res).code == 0) {
            location.href = "car1.html";
          } else {
            location.href = "login.html";
          }
        }
      },
      error: (code) => {
        console.log("error", code);
      },
    });

    ajax({
      type: "get",
      url: "http://localhost:3000/data",
      success: (res) => {
        var srt = JSON.parse(res).data;
        var o = "";
        for (var i = 0; i < srt.length - 4; i++) {
          o += `<a href="./soye.html?pid=${srt[i].pid}">
                         <p>
                        <img src="${srt[i].url}" alt="">
                            <span>${srt[i].title}</span>
                        </p>
                    </a>`;

          ww += `<a href="./soye.html?pid=${srt[i].pid}">
                         <p>
                        <img src="${srt[i].url}" alt="">
                            <span>${srt[i].title}</span>
                        </p>
                    </a>`;
        }
        qqq.innerHTML = o;
        www.innerHTML = ww;
        for (var i = 14; i < srt.length - 4; i++) {
          ee += `<a href="./soye.html?pid=${srt[i].pid}">
                         <p>
                        <img src="${srt[i].url}" alt="">
                            <span>${srt[i].title}</span>
                        </p>
                    </a>`;
          rr += `<a href="./soye.html?pid=${srt[i].pid}">
                         <p>
                        <img src="${srt[i].url}" alt="">
                            <span>${srt[i].title}</span>
                        </p>
                    </a>`;
        }
        eee.innerHTML = ee;
        for (var i = 13; i < srt.length - 4; i++) {
          rr += `<a href="./soye.html?pid=${srt[i].pid}">
                         <p>
                        <img src="${srt[i].url}" alt="">
                            <span>${srt[i].title}</span>
                        </p>
                    </a>`;
        }
        rrr.innerHTML = rr;

        for (var i = 16; i < srt.length - 4; i++) {
          tt += `<a href="./soye.html?pid=${srt[i].pid}">
                         <p>
                        <img src="${srt[i].url}" alt="">
                            <span>${srt[i].title}</span>
                        </p>
                    </a>`;
        }
        ttt.innerHTML = tt;

        for (var i = 12; i < srt.length - 4; i++) {
          yy += `<a href="./soye.html?pid=${srt[i].pid}">
                         <p>
                        <img src="${srt[i].url}" alt="">
                            <span>${srt[i].title}</span>
                        </p>
                    </a>`;
        }
        yyy.innerHTML = yy;

        for (var i = 8; i < srt.length - 4; i++) {
          uu += `<a href="./soye.html?pid=${srt[i].pid}">
                         <p>
                        <img src="${srt[i].url}" alt="">
                            <span>${srt[i].title}</span>
                        </p>
                    </a>`;
        }
        uuu.innerHTML = uu;

        for (var i = 12; i < srt.length - 4; i++) {
          ii += `<a href="./soye.html?pid=${srt[i].pid}">
                         <p>
                        <img src="${srt[i].url}" alt="">
                            <span>${srt[i].title}</span>
                        </p>
                    </a>`;
        }
        iii.innerHTML = ii;
        for (var i = 15; i < srt.length - 4; i++) {
          oo += `<a href="./soye.html?pid=${srt[i].pid}">
                         <p>
                        <img src="${srt[i].url}" alt="">
                            <span>${srt[i].title}</span>
                        </p>
                    </a>`;
        }
        ooo.innerHTML = oo;
        for (var i = 5; i < srt.length - 4; i++) {
          pp += `<a href="./soye.html?pid=${srt[i].pid}">
                         <p>
                        <img src="${srt[i].url}" alt="">
                            <span>${srt[i].title}</span>
                        </p>
                    </a>`;
        }
        ppp.innerHTML = pp;


        var p = "";
        for (var i = 13; i < srt.length; i++) {
          p += `
               <a href="./soye.html?pid=${srt[i].pid}">
                    <div class="smallcont">
                     <img src="${srt[i].url}" alt="">
                     <p class="name">${srt[i].title}</p>
                       <p class="price"><span class="left">券后价 ￥</span>
                        <span class="right">${srt[i].price}</span></p>
                  </div></a>`;
        }


        for (var i = 0; i < srt.length - 12; i++) {
          scr += `<a href="./soye.html?pid=${srt[i].pid}">
                        <div class="hotcase">
                            <img src="${srt[i].url}" alt="">
                            <div class="content">
                                <h3>${srt[i].brand}</h3>
                                <p class="intro">${srt[i].title}</p>
                                <p class="price"><span class="one">券后价 ￥</span><span class="two">${srt[i].price}</span></p>
                            </div>
                        </div>
                    </a>`;
        }


        hotbox.innerHTML = scr;






















        var l = "";
        var k = "";
        var j = "";
        var h = "";
        var g = "";
        var f = "";
        var d = "";
        var s = "";
        var a = "";
        var z = "";

        for (var i = 10; i < srt.length - 4; i++) {
          l += `<a href="./soye.html?pid=${srt[i].pid}">
                            <div class="smallcont">
                                <img src="${srt[i].url}" alt="">
                                <p class="name">${srt[i].title}</p>
                                <p class="price"><span class="left">券后价 ￥</span>
                                    <span class="right">${srt[i].price}</span>
                                </p>
                            </div>
                        </a>
                    `;
        }
        special[0].innerHTML = l;
        special[1].innerHTML = l;
        special[2].innerHTML = l;

        // console.log(l)

        // console.log(special2)
        for (var i = 0; i < srt.length - 14; i++) {
          k += `
                    <a href="./soye.html?pid=${srt[i].pid}">
                            <div class="smallcont">
                                <img src="${srt[i].url}" alt="">
                                <p class="name">${srt[i].title}</p>
                                <p class="price"><span class="left">券后价 ￥</span>
                                    <span class="right">${srt[i].price}</span>
                                </p>
                            </div>
                        </a>
                    `;
        }
        special2[0].innerHTML = k;
        special2[1].innerHTML = k;
        special2[2].innerHTML = k;
        for (var i = 5; i < srt.length - 9; i++) {
          j += `
                    <a href="./soye.html?pid=${srt[i].pid}">
                            <div class="smallcont">
                                <img src="${srt[i].url}" alt="">
                                <p class="name">${srt[i].title}</p>
                                <p class="price"><span class="left">券后价 ￥</span>
                                    <span class="right">${srt[i].price}</span>
                                </p>
                            </div>
                        </a>
                    `;
        }
        special3[0].innerHTML = j;
        special3[1].innerHTML = j;
        special3[2].innerHTML = j;

        for (var i = 7; i < srt.length - 7; i++) {
          h += `
                    <a href="./soye.html?pid=${srt[i].pid}">
                            <div class="smallcont">
                                <img src="${srt[i].url}" alt="">
                                <p class="name">${srt[i].title}</p>
                                <p class="price"><span class="left">券后价 ￥</span>
                                    <span class="right">${srt[i].price}</span>
                                </p>
                            </div>
                        </a>
                    `;
        }
        special4[0].innerHTML = h;
        // special4[1].innerHTML = ""
        // special4[2].innerHTML = h
        ddd[0].innerHTML = h;

        for (var i = 8; i < srt.length - 6; i++) {
          g += `
                    <a href="./soye.html?pid=${srt[i].pid}">
                            <div class="smallcont">
                                <img src="${srt[i].url}" alt="">
                                <p class="name">${srt[i].title}</p>
                                <p class="price"><span class="left">券后价 ￥</span>
                                    <span class="right">${srt[i].price}</span>
                                </p>
                            </div>
                        </a>
                    `;
        }
        special5[0].innerHTML = g;
        // special5[2].innerHTML = g

        for (var i = 7; i < srt.length - 7; i++) {
          f += `
                    <a href="./soye.html?pid=${srt[i].pid}">
                            <div class="smallcont">
                                <img src="${srt[i].url}" alt="">
                                <p class="name">${srt[i].title}</p>
                                <p class="price"><span class="left">券后价 ￥</span>
                                    <span class="right">${srt[i].price}</span>
                                </p>
                            </div>
                        </a>
                    `;
        }
        special6[0].innerHTML = f;
        // special6[2].innerHTML = f
        for (var i = 1; i < srt.length - 13; i++) {
          d += `
                    <a href="./soye.html?pid=${srt[i].pid}">
                            <div class="smallcont">
                                <img src="${srt[i].url}" alt="">
                                <p class="name">${srt[i].title}</p>
                                <p class="price"><span class="left">券后价 ￥</span>
                                    <span class="right">${srt[i].price}</span>
                                </p>
                            </div>
                        </a>
                    `;
        }
        special7[0].innerHTML = d;
        for (var i = 9; i < srt.length - 5; i++) {
          s += `
                    <a href="./soye.html?pid=${srt[i].pid}">
                            <div class="smallcont">
                                <img src="${srt[i].url}" alt="">
                                <p class="name">${srt[i].title}</p>
                                <p class="price"><span class="left">券后价 ￥</span>
                                    <span class="right">${srt[i].price}</span>
                                </p>
                            </div>
                        </a>
                    `;
        }
        special8[0].innerHTML = s;
        fff[0].innerHTML = s;
        for (var i = 8; i < srt.length - 6; i++) {
          a += `
                    <a href="./soye.html?pid=${srt[i].pid}">
                            <div class="smallcont">
                                <img src="${srt[i].url}" alt="">
                                <p class="name">${srt[i].title}</p>
                                <p class="price"><span class="left">券后价 ￥</span>
                                    <span class="right">${srt[i].price}</span>
                                </p>
                            </div>
                        </a>
                    `;
        }
        special9[0].innerHTML = a;
        for (var i = 2; i < srt.length - 12; i++) {
          z += `
                    <a href="./soye.html?pid=${srt[i].pid}">
                            <div class="smallcont">
                                <img src="${srt[i].url}" alt="">
                                <p class="name">${srt[i].title}</p>
                                <p class="price"><span class="left">券后价 ￥</span>
                                    <span class="right">${srt[i].price}</span>
                                </p>
                            </div>
                        </a>
                    `;
        }
        var phk = "";
        var phk2 = "";
        var phk3 = "";
        var phk4 = "";
        for (var i = 20; i < srt.length - 3; i++) {
          // console.log(i)
          phk += `
                     <a href="./soye.html?pid=${srt[i].pid}">
                    <img src="${srt[i].url}" alt=""></a>`;
          // console.log(srt[i])
        }

        phoneblock1.innerHTML = phk;
        // console.log(phk)

        for (var i = 21; i < srt.length - 2; i++) {
          // console.log(i)
          phk2 += `
                     <a href="./soye.html?pid=${srt[i].pid}">
                    <img src="${srt[i].url}" alt=""></a>`;
          // console.log(srt[i])
        }
        // console.log(phk2)
        phoneblock2.innerHTML = phk2;

        for (var i = 22; i < srt.length - 1; i++) {
          // console.log(i)
          phk3 += `
                     <a href="./soye.html?pid=${srt[i].pid}">
                    <img src="${srt[i].url}" alt=""></a>`;
          // console.log(srt[i])
        }
        // console.log(phk2)
        phoneblock3.innerHTML = phk3;

        for (var i = 23; i < srt.length; i++) {
          // console.log(i)
          phk4 += `
                     <a href="./soye.html?pid=${srt[i].pid}">
                    <img src="${srt[i].url}" alt=""></a>`;
          // console.log(srt[i])
        }
        // console.log(phk2)
        phoneblock4.innerHTML = phk4;
      },
      error: (code) => {
        console.log("error", code);
      },
    });
  </script>
  <script>
    ///轮播图
    function Banner(ops = {}) {
      // 接收并处理默认参数
      this.box = ops.box;
      this.imgs = ops.imgs;
      this.btns = ops.btns === undefined ? true : ops.btns;
      this.list = ops.list === undefined ? true : ops.list;
      this.autoPlay = ops.autoPlay === undefined ? true : ops.autoPlay;
      this.index = ops.index || 0;
      this.delayTime = ops.delayTime || 2000;
      this.prev = null;
      this.createImgbox();
      if (this.btns) {
        this.createBtns();
        this.addBtnsEvent();
      }
      if (this.list) {
        this.createList();
        this.addListEvent();
      }
      if (this.autoPlay) {
        this.play();
      }
    }

    Banner.prototype.createList = function () {
      this.listBox = createEle("list1", this.box);
      str = "";
      this.imgs.forEach((val, idx) => {
        str += `<span>${idx}</span>`;
      });
      this.listBox.innerHTML = str;
      // this.listBox.style.visibility="hidden";

      this.listBox.children[this.index].className = "active";
    };

    Banner.prototype.createBtns = function () {
      this.btnsBox = createEle("btns", this.box);
      this.left = createEle("left", this.btnsBox);
      this.right = createEle("right", this.btnsBox);
      this.left.innerHTML = "&lt;";
      this.right.innerHTML = "&gt;";
      // this.left.className = "iconfont icon-arrow-left";
      // this.right.className = "iconfont icon-arrow-right";
    };

    Banner.prototype.createImgbox = function () {
      this.imgbox = createEle("imgbox", this.box);
      let str = "";
      this.imgs.forEach((val) => {
        str += `<a href="${val.href}"><img src="${val.src}" alt="${val.alt}" title="${val.title}"></a>`;
      });
      this.imgbox.innerHTML = str;

      this.imgbox.children[this.index].style.left = "0";
    };

    Banner.prototype.addBtnsEvent = function () {
      const that = this;
      this.left.onclick = function () {
        that.changeIndex(1);
      };
      this.right.onclick = function () {
        // B3-2. 改变索引
        that.changeIndex(2);
      };
    };

    Banner.prototype.changeIndex = function (d) {
      if (d === 1) {
        // 左按钮计算索引
        // B4. 判断是否是临界值
        if (this.index === 0) {
          // 单独处理
          this.index = this.imgs.length - 1;
          // 同步保存上一个索引（要走的图片的索引）
          this.prev = 0;
        } else {
          // 减1
          this.index--;
          // 同步保存上一个索引（要走的图片的索引）
          this.prev = this.index + 1;
        }
        // B5. 根据索引切换图片
        this.move(this.prev, this.index, 1);
      } else {
        // 右按钮计算索引
        if (this.index === this.imgs.length - 1) {
          this.index = 0;
          this.prev = this.imgs.length - 1;
        } else {
          this.index++;
          this.prev = this.index - 1;
        }
        this.move(this.prev, this.index, -1);
      }
    };

    Banner.prototype.move = function (prev, now, d) {
      const imgs = this.imgbox.children;
      // 从哪开始走
      imgs[prev].style.left = 0;
      // 走到哪
      // imgs[prev].style.left = -imgs[0].offsetWidth + "px";
      move(imgs[prev], {
        left: imgs[0].offsetWidth * d,
      });

      // 从哪进来
      imgs[now].style.left = -imgs[0].offsetWidth * d + "px";
      // 进到哪
      // imgs[now].style.left = 0;
      move(imgs[now], {
        left: 0,
      });

      // B6. 判断是否存在分页器
      if (this.list) {
        // 分页器的高亮和图片索引同步
        this.listBox.children[prev].className = "";
        this.listBox.children[now].className = "active";
      }
    };

    Banner.prototype.addListEvent = function () {
      const items = this.listBox.children;
      const that = this;
      for (let i = 0; i < items.length; i++) {
        // L3. 给每个分页器添加索引
        items[i].index = i;
        // 绑定事件
        items[i].onclick = function () {
          // L4. 根据点击的索引和默认索引比较大小得出运动方向
          if (this.index > that.index) {
            // L5. 调用切换图片功能，传入对应索引和方向
            that.move(that.index, this.index, -1);
          }
          if (this.index < that.index) {
            that.move(that.index, this.index, 1);
          }
          // L6. 将本次点击的索引设置为下一次的上一个
          that.index = this.index;
        };
      }
    };

    Banner.prototype.play = function () {
      const that = this;
      // A2. 利用计时器执行右按钮的功能开启自动播放
      let t = setInterval(() => {
        this.changeIndex(2);
      }, this.delayTime);
      // A3. 当鼠标进入整个容器时，停止自动播放
      this.box.onmouseenter = function () {
        clearInterval(t);
      };
      // A4. 当鼠标离开整个容器时，继续自动播放
      this.box.onmouseleave = function () {
        t = setInterval(() => {
          that.changeIndex(2);
        }, that.delayTime);
      };
    };

    function createEle(className, parent) {
      const ele = document.createElement("div");
      ele.className = className;
      parent.appendChild(ele);
      return ele;
    }

    const box = document.querySelector(".banner1");
    const imgs = [
      {
        src: "./images/01-1.jpg",
        title: "广告1",
        href: "banner1",
        alt: "这是广告1",
      },
      {
        src: "./images/02-2.jpg",
        title: "广告2",
        href: "banner2",
        alt: "这是广告2",
      },
      {
        src: "./images/03-3.jpg",
        title: "广告3",
        href: "banner3",
        alt: "这是广告3",
      },

      {
        src: "./images/05-5.jpg",
        title: "广告5",
        href: "banner5",
        alt: "这是广告5",
      },
    ];

    // 执行轮播图功能，传入指定参数
    new Banner({
      box,
      imgs,
    });

    // let str = "";
    // var pp = "";
    // var oo = "";
    // var ii = "";
    // var uu = "";
    // var yy = "";
    // var tt = "";
    // var rr = "";
    // var ee = "";
    // var ww = "";

    // console.log(str)








  </script>
</body>

</html>